<template>
	<view>
		<view style="padding: 5px 20px;background: #fff;position: fixed;z-index: 999;width: 100%;box-sizing: border-box;">
			<view style="background: #efefef;position: relative;">
				<image src="../../static/search.png" style="width: 18px;height: 18px;position: absolute;top: 4px;left: 6px;" mode=""></image>
				<input type="text" @confirm="searchGoods" confirm-type="search" style="padding-left: 30px;">
			</view>
		</view>
		<!-- <uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件" fixed="true" style="top:0"  @click-right="changeliststyle"></uni-nav-bar> -->
		<view class="content clear" :class="!liststyle ? '' : 'liststyle'" style="padding-top: 40px;">
			<view v-for="(item,index) in res" :key="index"  @tap="opendetail" :data-newsid="item.id">
				<view class="list"  style="position: relative;" >
					<view class="imgbox">
						<image class="image" :src="item.thumb"></image>
					</view>
					<view class="detail">
						<view class="name" v-if="item.title">{{item.title}}</view>
						<view class="productprice" v-if="item.productprice">¥{{item.productprice}}</view>
						<view class="price">
							<view class="text" v-if="item.marketprice">¥{{item.marketprice}}</view>
							<view class="buy">
								<image src="https://bhh.ax1319.com/attachment/images/5/2018/10/jifen.png"></image>
								<!-- <text>{{item.jfbl}}%</text> -->
							</view>
						</view>
					</view>
					<view class="buy-btn">
						<button class="mini-btn buybutton" >购买</button>
					</view>
					<view class="tag" v-if="item.nocommission == 1">分享赚佣金</view>
				</view>
			</view>
		</view>
		<view v-if="res.length == 0">
			<image src="../../static/order4.png" mode="" style="width: 240upx;height: 240upx;display: block;margin: 0 auto;margin-top: 150upx;"></image>
			<text style="display: block;text-align: center;color: #999;">暂时没有任何商品</text>
		</view>
		<uni-load-more v-if="load == 1 && res.length != 0"  :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>
<script>
	import uniLoadMore from '../../components/uni-load-more.vue'
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar,uniLoadMore},
		data() {
			return {
				category:"",
				keywords:"",
				res:[],
				page:1,
				liststyle:false,
				index:2,
				loadingType:0,
				load:0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				}
			};
		},
		onLoad:function(e){
			uni.showLoading()
			var cate = '',keywords = ''
			if(e.cate != undefined){
				this.category = e.cate
				cate = '&cate='+ e.cate
			}else if(e.keywords != undefined){
				this.keywords = e.keywords
				keywords = '&keywords='+ e.keywords
			}
			uni.request({
				url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1'+cate+keywords,
				success: res => {
					this.res = res.data.result.list;
					if(res.data.result.total > res.data.result.pagesize){
						this.load = 1
					}
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});
		},
		onReachBottom(){
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			uni.request({
				url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&cate='+this.category+'&order=&by=&merchid=&page='+this.index,
				method: 'GET',
				success: res => {
					if(res.data.result.list.length == 0){
						this.loadingType = 2;
						return;
					}
					this.res = this.res.concat(res.data.result.list)
					this.loadingType = 0;
					this.index = this.index + 1;
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		methods:{
			opendetail(e){
				uni.navigateTo({
					url: 'detail?goodsid='+e.currentTarget.dataset.newsid
				});
			},
			changeliststyle(){
				if(this.liststyle == true){
					this.liststyle =false
				}else{
					this.liststyle = true
				}
			},
			searchGoods(e){
				uni.showLoading()
				uni.request({
					url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1&keywords='+e.mp.detail.value,
					method: 'GET',
					data: {},
					success: res => {
						this.res = res.data.result.list;
						if(res.data.result.total > res.data.result.pagesize){
							this.load = 1
						}
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.tag {
		position: absolute;
		left: 0;
		bottom: 0upx;
		z-index: 2;
		line-height: 35upx;
		background: rgba(243, 223, 177, 1);
		background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
		border-radius: 0px 18upx 18upx 0px;
		padding: 0 10upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(120, 79, 6, 1);
	}
	.content{padding:8upx;}.list{padding:10upx;width:346upx;float:left;}.imgbox{height:346upx;}.image{width:346upx;height:346upx;}.detail{padding:20upx;background:#fff;}.buy-btn:after{display:block;content:"";clear:both;}.buy-btn{background:#fff;padding-right:20upx;padding-bottom:20upx;}.name{height:68upx;font-size:26upx;line-height:34upx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.productprice{line-height:48upx;font-size:24upx;color:#999;text-decoration:line-through;}.price,.buy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.price .text{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#f55;font-size:30upx;line-height:38upx;}.price text{color:#f55}.price image{width:38upx;height:38upx;display:block;margin-right:5upx;position:relative;top:-2upx;}.buy text{line-height:38upx;}.liststyle{padding:0;}.liststyle .list{width:710upx;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#fff;height:196upx;padding:20upx;float:inherit;border-bottom:2upx solid #e7e7e7;}.liststyle .imgbox{height:196upx;background:#fff;}.liststyle .detail{height:156upx;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.liststyle .list .image{width:160upx;height:160upx;margin-top:18upx;}.liststyle .buy-btn{padding:0;padding-top:74upx;}.buybutton{width:90upx;height:48upx;float:right;border:1px solid #fe5455;color:#fe5455;padding:0 15upx;background:#fff;line-height:44upx;font-size:24upx;}</style>